<template>
  <div class="content industry-jpg5">
    <div class="industry">
      <div class="industry-row">
        <div>
          <div class="industry-title">
            <p>乡镇累计增加值能耗情况（1-5月）<i class="gl"></i><i class="gl"></i></p>
          </div>
          <table class="industry-table industry-sub3-table">
            <thead>
              <tr>
                <th rowspan="2">开发区、镇（街道）</th>
                <th colspan="2">等价综合能耗（吨）</th>
                <th rowspan="2">万元GDP能耗下降率年度目标</th>
                <th colspan="3">规模以上工业万元增加值综合能耗降低率</th>
              </tr>
              <tr>
                <th>累计实绩</th>
                <th>增速（%）</th>
                <th>年度目标</th>
                <th>上升（+）或下降（-）</th>
                <th>降低率排名</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in 13" :key="item.index">
                <td :style="{color: '#0ff6fc'}">GDP(亿元)</td>
                <td>1425.5</td>
                <td>2.2</td>
                <td>147</td>
                <td>1.02</td>
                <td>1.2</td>
                <td>2</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="industry-box">
          <div class="industry-title">
            <p>降低率排名占比分析<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart1" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
      <div class="industry-row">
        <div class="industry-box">
          <div class="industry-title">
            <p>能源消费总量对比分析图<i class="gl"></i><i class="gl"></i></p>
          </div>
          <chart :options="chart2" :theme="chartTheme" auto-resize></chart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'industryF',
  data () {
    return {
      chartTheme: {},
      chart1: {
        color: ['#0024e4','#9d4fff','#4bf7ff','#acfbff','#2ba0ff','#0b4dff'],
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          show: false,
        },  
        series : [
          {
            name:'用电负荷',
            type:'pie',
            radius : '70%',
            center: ['50%', '50%'],
            data:[
            {value:435, name:'开发区黄湾镇'},
            {value:310, name:'尖山新区'},
            {value:274, name:'许村镇'},
            {value:235, name:'马桥街道'},
            {value:200, name:'长安镇(高新区)'},
            {value:200, name:'周王庙镇'},
            {value:235, name:'硖石街道'},
            {value:200, name:'斜桥镇'},
            ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#fff'
                },
                length: 10,
                length2: 60
              }
            },
            itemStyle: {
              normal: {
                shadowOffsetY: 4,               
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 166, .25)'
              }
            },
          }
        ]
      },
      chart2: {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            data : ['2011', '2012', '2013', '2014', '2015', '2016', '2017'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis : [
          {
            name: '社会用电量（万千瓦时）',
            type : 'value',
          },
          {
            name: '增速（%）',
            type : 'value',
          },
        ],
        legend: {
          data: ['本期','同期','增速']
        },
        series : [
          {
            name:'本期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#50debe'},
                  {offset: 1, color: '#1ac6da'}
                ]),
              }
            }
          },
          {
            name:'同期',
            type:'bar',
            barWidth: '20%',
            data:[10, 52, 200, 334, 390, 330, 220],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[
                  {offset: 0, color: '#f569cc'},
                  {offset: 1, color: '#8b33cf'}
                ]),
              }
            }
          },
          {
            name:'增速',
            type:'line',
            smooth: false,
            symbolSize: 6,
            yAxisIndex: 1,
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(201, 025, 100, 0.5)',
              shadowOffsetY: 4,
              shadowBlur: 10
            },
            data:[2, 5.2, 5.4, 5.8, 7.0, 7.8, 8.0],
            itemStyle: {
              normal: {
                color: '#fd8d53'
              }
            }
          }
        ]
      }
    }
  },
  mounted: function () {
    this.$http('/vqdisplay/static/HospitalChartTheme.json')
    .then( (response) => {
      this.chartTheme = response.data
    })

  },
}
</script>

<style scoped>
  @import '../../../style/industry.css';
  .echarts {
    height: 80%;
    width: 100%;
  }
  .industry-table td, .industry-table th {
    padding: 3px 0;
  }
  .industry-row:nth-child(1) {
    flex-grow: 2;
  }
</style>